<template>
  <div class="app-container">

    <el-container>
      <el-header>
        <div class="title">健康医养设备监控中心</div>
        <div class="num">
          <div class="numleft">
            共<span style="color:blue"> 20</span>台设备,其中<span style="color:green">20</span>台设备在线,<span style="color:red">0</span>台离线
          </div>
          <div class="numright" style="padding: 0;height: 26px;"><el-button type="primary" style="padding: 0;height: 26px;">九分屏</el-button></div>
        </div>
      </el-header>
      <!-- -------------------------------------------- -->
      <el-main>
        <div class="big">
          <div class="one">
            <!-- 上 -->
            <div
              class="top"
              style="display: flex;
              justify-content: space-between;
              align-items: center;
              height:30px"
            >
              <div>房间1-101</div>  <div style="width:10px;height:10px;background-color:green;border-radius:45%;" />
            </div>
            <!-- 中 -->
            <div class="middle">

              <img
                style="width: 300px; height: 200px"
                src="../../assets/monitor_img/bed.png"
                @click="change"
              >

            </div>
            <!-- 下 -->
            <div
              class="footer"
              style="display:flex; display: flex;
                justify-content: space-between;
                height: 30px;
                align-items: flex-end;"
            >
              <div>P00356539</div>
              <div>体检</div>
              <div>ZhangGuodong</div>
            </div>

          </div>
          <div class="one">
            <!-- 上 -->
            <div
              class="top"
              style="display: flex;
              justify-content: space-between;
              align-items: center;
              height:30px"
            >
              <div>房间1-101</div>  <div style="width:10px;height:10px;background-color:green;border-radius:45%;" />
            </div>
            <!-- 中 -->
            <div class="middle">
              <img
                style="width: 300px; height: 200px"
                src="../../assets/monitor_img/bed.png"
                @click="change"
              >

            </div>
            <!-- 下 -->
            <div
              class="footer"
              style="display:flex; display: flex;
                justify-content: space-between;
                height: 30px;
                align-items: flex-end;"
            >
              <div>P00356539</div>
              <div>体检</div>
              <div>ZhangGuodong</div>
            </div>

          </div>
          <div class="one">
            <!-- 上 -->
            <div
              class="top"
              style="display: flex;
              justify-content: space-between;
              align-items: center;
              height:30px"
            >
              <div>房间1-101</div>  <div style="width:10px;height:10px;background-color:green;border-radius:45%;" />
            </div>
            <!-- 中 -->
            <div class="middle">
              <img
                style="width: 300px; height: 200px"
                src="../../assets/monitor_img/pic.png"
                @click="change"
              >

            </div>
            <!-- 下 -->
            <div
              class="footer"
              style="display:flex; display: flex;
                justify-content: space-between;
                height: 30px;
                align-items: flex-end;"
            >
              <div>P00356539</div>
              <div>体检</div>
              <div>ZhangGuodong</div>
            </div>

          </div>
          <div class="one">
            <!-- 上 -->
            <div
              class="top"
              style="display: flex;
              justify-content: space-between;
              align-items: center;
              height:30px"
            >
              <div>房间1-101</div>  <div style="width:10px;height:10px;background-color:green;border-radius:45%;" />
            </div>
            <!-- 中 -->
            <div class="middle">
              <img
                style="width: 300px; height: 200px"
                src="../../assets/monitor_img/black.png"
                @click="change"
              >

            </div>
            <!-- 下 -->
            <div
              class="footer"
              style="display:flex; display: flex;
                justify-content: space-between;
                height: 30px;
                align-items: flex-end;"
            >
              <div>P00356539</div>
              <div>体检</div>
              <div>ZhangGuodong</div>
            </div>

          </div>
          <div class="one">
            <!-- 上 -->
            <div
              class="top"
              style="display: flex;
              justify-content: space-between;
              align-items: center;
              height:30px"
            >
              <div>房间1-101</div>  <div style="width:10px;height:10px;background-color:green;border-radius:45%;" />
            </div>
            <!-- 中 -->
            <div class="middle">
              <img
                style="width: 300px; height: 200px"
                src="../../assets/monitor_img/pic.png"
                @click="change"
              >

            </div>
            <!-- 下 -->
            <div
              class="footer"
              style="display:flex; display: flex;
                justify-content: space-between;
                height: 30px;
                align-items: flex-end;"
            >
              <div>P00356539</div>
              <div>体检</div>
              <div>ZhangGuodong</div>
            </div>

          </div>
          <div class="one">
            <!-- 上 -->
            <div
              class="top"
              style="display: flex;
              justify-content: space-between;
              align-items: center;
              height:30px"
            >
              <div>房间1-101</div>  <div style="width:10px;height:10px;background-color:green;border-radius:45%;" />
            </div>
            <!-- 中 -->
            <div class="middle">
              <img
                style="width: 300px; height: 200px"
                src="../../assets/monitor_img/bed.png"
                @click="change"
              >

            </div>
            <!-- 下 -->
            <div
              class="footer"
              style="display:flex; display: flex;
                justify-content: space-between;
                height: 30px;
                align-items: flex-end;"
            >
              <div>P00356539</div>
              <div>体检</div>
              <div>ZhangGuodong</div>
            </div>

          </div>
          <div class="one">
            <!-- 上 -->
            <div
              class="top"
              style="display: flex;
              justify-content: space-between;
              align-items: center;
              height:30px"
            >
              <div>房间1-101</div>  <div style="width:10px;height:10px;background-color:green;border-radius:45%;" />
            </div>
            <!-- 中 -->
            <div class="middle">
              <img
                style="width: 300px; height: 200px"
                src="../../assets/monitor_img/pic.png"
                @click="change"
              >

            </div>
            <!-- 下 -->
            <div
              class="footer"
              style="display:flex; display: flex;
                justify-content: space-between;
                height: 30px;
                align-items: flex-end;"
            >
              <div>P00356539</div>
              <div>体检</div>
              <div>ZhangGuodong</div>
            </div>

          </div>
          <div class="one">
            <!-- 上 -->
            <div
              class="top"
              style="display: flex;
              justify-content: space-between;
              align-items: center;
              height:30px"
            >
              <div>房间1-101</div>  <div style="width:10px;height:10px;background-color:green;border-radius:45%;" />
            </div>
            <!-- 中 -->
            <div class="middle">
              <img
                style="width: 300px; height: 200px"
                src="../../assets/monitor_img/bed.png"
                @click="change"
              >

            </div>
            <!-- 下 -->
            <div
              class="footer"
              style="display:flex; display: flex;
                justify-content: space-between;
                height: 30px;
                align-items: flex-end;"
            >
              <div>P00356539</div>
              <div>体检</div>
              <div>ZhangGuodong</div>
            </div>

          </div>

        </div>

      </el-main>
    </el-container>
    <el-dialog title="设备详情" :visible.sync="show" width="80%">
      <img src="@/assets/monitor_img/pic_detail.png" width="100%">
    </el-dialog>
  </div>
</template>

<script>

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      show: false,
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      src: '../../assets/monitor_img/bed.png',
      url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      list: null,
      listLoading: false,
      form: {},
      equipmentDetail: {},
      currentPage: 1,
      dialogFormVisible: false,
      diaLook: true,
      operate: ''
    }
  },
  methods: {
    change() {
      this.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;}
    .title  {
      font-size: 25px;
    text-align: center;
    font-weight: 400;
    }
    .num{
      display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    }

  .el-aside {
    background-color: #304156;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    //background-color: #4688eb;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  .big{
    width: 1100px;

    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-start;
    align-items: flex-start;
  .one {
        outline: 1px solid;
     background-color: #B3C0D1;
    margin: 10px 20px;
    width: 300px;
    height: 322px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  }
</style>
